import React, { Component } from "react";
import {
  SearchBar,
  Swiper,
  Ellipsis,
  List,
  InfiniteScroll,
  Toast,
} from "antd-mobile";
import "../../styles/Shouye.scss";
import "../../assets/font_b9ht5pe2k05/iconfont.css";
import pic from "../../assets/log.png";
import img1 from "../../assets/chaoshi.png";
import img2 from "../../assets/数码.png";
import img3 from "../../assets/服饰.png";
import img4 from "../../assets/生鲜.png";
import img5 from "../../assets/daojia.png";
import img6 from "../../assets/chongzhi.png";
import img7 from "../../assets/9.9pin.png";
import img8 from "../../assets/juan.png";
import img9 from "../../assets/jintie.png";
import img10 from "../../assets/huiyuan.png";
import * as service from "../../api/index";
import Ddaojishi from "../../components/Ddaojishi";
import Linklist from "../../components/Linklist";
class Shouye extends Component {
  constructor(props) {
    super(props);
    this.state = {
      list: [],
      navlist: [
        { pic: img1, name: "嗨购超市" },
        { pic: img2, name: "数码电器" },
        { pic: img3, name: "嗨购服饰" },
        { pic: img4, name: "嗨购生鲜" },
        { pic: img5, name: "嗨购到家" },
        { pic: img6, name: "充值缴费" },
        { pic: img7, name: "9.9元拼" },
        { pic: img8, name: "领卷" },
        { pic: img9, name: "领津贴" },
        { pic: img10, name: "加会员" },
      ],
      list2: [],
      list3: [],
      loadMore: true,
      hasMore: true,
      yeshu: 1, //这个是发请求的页数
      daodi: true,
      City: "",
    };
  }

  async componentDidMount() {
    var res = await service.banner_list();
    this.state.list = res.data.data;
    this.setState({ list: res.data.data });
    //请求秒杀
    var res = await service.seckilllist_list({ count: 1, limitNum: 6 });
    this.state.list2 = res.data.data;
    this.setState({ list2: res.data.data });
    //请求
    var res = await service.recommendlist_list({ count: 1, limitNum: 10 });
    this.state.list3 = res.data.data;
    this.setState({
      list3: res.data.data,
      City: this.props.location.state.name,
    });
  }

  async loadMore() {
    //这个函数就是当到达触底的临界值时就会触发
    this.state.yeshu++;
    this.setState({ yeshu: this.state.yeshu });
    var res = await service.recommendlist_list({
      count: this.state.yeshu,
      limitNum: 3,
    });
    if (res.data.data.length == 0) {
      this.state.daodi = false;
    }
    this.state.list3.push(...res.data.data);
  }
  //  防抖
  fangdou(fu, time) {
    var timerid = null; //保存定时器id
    return () => {
      if (timerid) {
        clearTimeout(timerid);
      }
      timerid = setTimeout(() => {
        fu();
      }, time);
    };
  }

  daodi() {
    Toast.show({
      content: "到底了........",
    });
  }
  //进入搜索页面
  Search() {
    this.props.history.push("/Search");
  }
  //进入搜索页面
  City() {
    this.props.history.push("/City");
  }

  //进入详情页面
  quanbushangpin(id) {
    this.props.history.push({ pathname: "/Xiangqing", state: { id: id } });
  }

  //登录
  denglu() {
    this.props.history.push("/login");
  }
  render() {
    return (
      <div className="Shouye">
        {/* 头部 */}
        <div className="header">
          <div
            className="header_left"
            onClick={() => {
              this.City();
            }}
          >
            {this.state.City ? this.state.City : "西安"}
          </div>
          <div
            className="header_center"
            onClick={() => {
              this.Search();
            }}
          >
            <img src={pic} alt="" />
            <span className="span1"></span>
            <span className="iconfont icon-fangdajing"></span>
            <span>立柜式空调</span>
          </div>
          <div
            className="header_right"
            onClick={() => {
              this.denglu();
            }}
          >
            登录
          </div>
        </div>
        {/* 轮播图 */}
        <div className="banner">
          <div className="img">
            <Swiper autoplay loop autoplayInterval={1000}>
              {this.state.list.map((item, index) => {
                return (
                  <Swiper.Item key={index}>
                    <img src={item.img} alt="" />
                  </Swiper.Item>
                );
              })}
            </Swiper>
          </div>
        </div>
        {/* 导航区域 */}
        <div className="nav">
          {this.state.navlist.map((item, index) => {
            return (
              <div className="item" key={index}>
                <img src={item.pic} alt="" />
                <p>{item.name}</p>
              </div>
            );
          })}
        </div>
        {/* 秒杀区域 */}
        <div className="miaosha">
          <div className="miaosha_nav">
            <div className="miaosha_header">
              <span>嗨购秒杀</span>
              <span className="span2">18点开场</span>
              <Ddaojishi />
            </div>
            <div className="nav2">
              {this.state.list2.map((item, index) => {
                return (
                  <div className="item" key={index}>
                    <img src={item.img1} alt="" />
                    <p>￥{item.originprice}</p>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
        {/* 商品展示区域 */}
        <Linklist ref="footer" shouye={this}></Linklist>
      </div>
    );
  }
}

export default Shouye;
